<template>
  <view class="">
    <view v-if="textNameShow" :class="textClass">
      <view v-if="requireRed" class="flex-align lh42 mgr10">
        <text class="required red-color">*</text>
      </view>
      {{ textName }}
      <view v-if="textNameTipsShow" class="flex-align fs24 mgl10">
        {{textTipsName}}
      </view>
    </view>

    <view
      class="input w100 box-b between-box zIndex10"
      :class="[showBg ? bgColor : '', inputHeight, bgDefultColor]"
      @click.stop="clickable&&toPage()"
    >
      <view class="box-b flex-align flex1" :class="[showBg ? pdClass : pdClass, inputHeight]">
        <slot name="left"></slot>
        <view class="flex-align flex1">
          <input
            :maxlength="maxLength"
            :value="value"
            :type="inputType"
            :placeholder-class="placeholderClass"
            :class="className"
            :placeholder="placeholder"
            :disabled="disabled"
            @input="inputload"
            @blur="inputblur"
          />
        </view>
        <view v-if="showClear" class="" @click="clearInput()">
          <view v-if="value" class="">
            <server-image class="img50 v-align-m" name="20230327001.png" mode="aspectFill" />
          </view>
        </view>
        <slot></slot>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'c-input',
  props: {
    textName: {
      type: String,
    },
    placeholder: {
      type: String,
    },
    inputType: {
      type: String,
      default: 'text',
    },
    border: {
      type: Boolean,
      default: false,
    },
    rightTag: {
      type: Boolean,
      default: false,
    },
    value: {
      type: [String, Number],
      default: '',
    },
    require: {
      type: Boolean,
      default: false,
    },
    requireRed: {
      type: Boolean,
      default: false,
    },
    isBold: {
      type: String,
    },
    tagText: {
      type: String,
    },
    maxLength: {
      //现在最大输入长度，默认不限制
      type: Number,
      default: -1,
    },
    placeholderClass: {
      type: String,
      default: 'fs24 colorcc',
    },
    className: {
      type: String,
      default: 'ipt color1a fs24 w100',
    },
    textNameShow: {
      type: Boolean,
      default: false,
    },
    textClass: {
      type: String,
      default: 'fs24 lh24 mgb20 flex-align color808',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    bgColor: {
      type: String,
      default: '',
    },
    bgDefultColor: {
      type: String,
      default: 'bdd00 radius12',
    },
    // 是否显示背景颜色
    showBg: {
      type: Boolean,
      default: false,
    },
    pdClass: {
      type: String,
      default: 'pd028',
    },
    inputHeight: {
      type: String,
      default: 'h74',
    },
    // 是否显示清除按钮
    showClear: {
      type: Boolean,
      default: false,
    },
    textNameTipsShow: {
      type: Boolean,
      default: false,
    },
    textTipsName: {
      type: String,
    },
    // 是否可点击
    clickable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentValue: this.value,
    };
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
  },
  methods: {
    setCurrentValue(value) {
      // console.log(value)
      if (value === this.currentValue) return;
      this.currentValue = value;
    },
    inputload(event) {
      let value = event.target.value;
      // uniapp小程序 粘贴会带有一个回车键
      if(value){
        value = value.replace(/\n/g, '')
      }
      this.$emit('input', value);
    },
    inputblur(event) {
      let value = event.target.value;
      // uniapp小程序 粘贴会带有一个回车键
      if(value){
        value = value.replace(/\n/g, '')
      }
      this.$emit('blur', value);
    },
    // 清除数据
    clearInput() {
      this.$emit('input', '');
      this.$emit('blur', '');
    },
    toPage(){
      if(!this.clickable) return
      this.$emit('toPage')
    },
  },
};
</script>

<style lang="less" scoped></style>
